<html>
<head>
<title>Gmap Offline</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />  
<link rel="stylesheet" href="checkbox.css" type="text/css" media="screen" />  
<script src="jquery-1.7.1.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.mouse.js"></script>
<script src="jquery.ui.draggable.js"></script>
<script src="process_map.js"></script>
<script type="text/javascript">
$(document).ready(function() { 

//		$("#load_node").hide();
		init_control();
		var stt_down = false;
		var type_tool = false;
		array_point = new Array(100);
		var count_point = 0;
		
		wd_width = $("#tileContainer").width();
		wd_height = $("#tileContainer").height();
		x_default = 13009;
		y_default = 7212;
		left_show_default = Math.round(wd_width/2) - 256/2;
		top_show_default = Math.round(wd_height/2) - 256/2;

		position_div = $("#tileContainer").position();
		position_div_left_origin = -position_div.left;
		position_div_top_origin = -position_div.top;
		position_div_left_old = -position_div.left;
		position_div_top_old = -position_div.top;
		
		array_info_tiles = init_map(x_default, y_default, left_show_default, top_show_default);
		
		$(function() {
			$( "#dragContainer" ).draggable();
		});

		// zoom in
		$("#dragContainer").dblclick(function(event){
			// zoom in
			if(type_tool) {			
				var lastID;
				var tile_x, tile_y;
				var delta_left_convert = $("#dragContainer").position().left - position_div_left_origin;
				var delta_top_convert = $("#dragContainer").position().top - position_div_top_origin;
				var delta_left_click = (event.pageX - delta_left_convert) - left_show_default;  
				var delta_top_click = (event.pageY - delta_top_convert) - top_show_default;
				tile_x = x_default + Math.floor(delta_left_click/256);
				tile_y = y_default + Math.floor(delta_top_click/256);
				var x_pixel, y_pixel;
				if(delta_left_click < 0) {
					x_pixel = tile_x * 256 + (256 - Math.abs(delta_left_click%256));	
				} else {
					x_pixel = tile_x * 256 + Math.abs(delta_left_click%256);
				}
				if(delta_top_click < 0) {
					y_pixel = tile_y * 256 + (256 - Math.abs(delta_top_click%256));	
				} else {
					y_pixel = tile_y * 256 + Math.abs(delta_top_click%256);
				}	
				var test_convert_pixel_to_latlng = fromPixelToLatLng(x_pixel, y_pixel, zoom_level);
				$.ajax({
					type: "POST",
					url: "utilities_db.php",
					dataType: 'json',
					data: "function_name=getLastID&table_input=point",
					success: function(data) {
						var temp = null;
						if($("#list_point").val() != null) {
							temp = parseInt($("#list_point").val()) + 1;
						} else {
							temp = parseInt(data.id) + 1;
						}
						var option_text = temp + "(" + round_f(test_convert_pixel_to_latlng.lat, 6) + ", " + round_f(test_convert_pixel_to_latlng.lng, 6) + ")";
						var value = temp;
						$("#list_point").append(new Option(option_text, value, true, true));						
				  	}
				});	
				setTimeout(function() {
					var p = new point($("#list_point").val(), round_f(test_convert_pixel_to_latlng.lat, 6), round_f(test_convert_pixel_to_latlng.lng, 6), '');
					array_point[count_point] = p;	
					count_point++;
				},100);		
				
			} else {
				if(zoom_level > -2) {
					zoom_map(event, true);
				}
			}
		});

		// zoom out
		$('#dragContainer').unbind('mousedown').mousedown(function(event){
			   var rightclick = (event.which)
			       ? (event.which == 3)
			       : (event.button == 2);
			   var t = $(this);
			   if (rightclick) {
			       if (t.data('rightclicked')) {
			    	   if(zoom_level < 17) {
			    		   zoom_map(event, false);
			    	   }
			       } else {
			           t.data('rightclicked',true);
			           setTimeout((function(t){ return function(){ t.data
							('rightclicked',false); } })(t), 300);
			       };
			   };
		});
		$("#dragContainer").mousedown(function(event){
			if(event.which == 1) {
				$("#tileContainer").css('cursor', 'url(closedhand_8_8.cur), move');
			}			
		}).mouseup(function(event){
			$("#tileContainer").css("cursor", "auto");
		});
		
		callback();
		
		// Xu ly su kien menu bar
		// When a link is clicked  
		$("a.tab").click(function() {  
			
			// switch all tabs off  
			$(".active").removeClass("active");  
	  
			// switch this tab on  
			$(this).addClass("active");  
	  
			// slide all elements with the class 'content' up  
			$(".content").slideUp();  
	  
			// Now figure out what the 'title' attribute value is and find the element with that id.  Then slide that down.  
			var content_show = $(this).attr("title"); 
			if(content_show == "content_3") {
				type_tool = true;
			} else {
				type_tool = false;
			}
			$("#"+content_show).slideDown();  
	  
		});  
		
		$("#browse").click(function() {
			var height = 100 + 10 * 20;
			window.open("browse_segment.php", "Window", "width=320,height=" + height + ",scrollbars=yes");					  
			//alert("Da click!");
		});
		
		$("#browse_update").click(function() {
			var height = 100 + 10 * 20;
			window.open("browse_segment.php", "Window", "width=320,height=" + height + ",scrollbars=yes");					  
			//alert("Da click!");
		});
		
		$("#btn_insert_locality").click(function() {
			var function_name = "insert_locality";
			var city_id = $("#city").val();
			var district_id = $("#district").val();
			var ward_id = $("#ward").val();
			var locality_level = $("#locality_level").val();
			var name_locality = $("#name_locality").val();
			var latitude = $("#latitude").val();
			var longitude = $("#longitude").val();
			$.ajax({
				type: "POST",
				url: "insert_db.php",
			  	data: "function_name=" + function_name + "&city_id=" + city_id + "&district_id=" + district_id + "&ward_id=" + ward_id +
			  		"&locality_lv=" + locality_level + "&name_locality=" + name_locality + "&lat=" + latitude + "&lng=" + longitude
			}).done(function(msg) {
				if(msg = 1) {
					alert("thêm thành công");
				} else {
					alert("lỗi");
				}			  	
			});		
		});
		$("#btn_insert_segment").click(function() {
			var stt_insert_segment = false;
			var stt_insert_point = false;
			var function_name_segment = "insert_segment";
			var administrative_id = $("#road_street_id").val();
			var name_segment = $("#name_segment").val();
			var length_segment = $("#length_segment").val();
			var list_segment_id = $("#list_segment_id").val();
			var sequence = $("#sequence").val();
			$.ajax({
				type: 	"POST",
				url : 	"insert_db.php",
			  	data: 	"function_name=insert_segment" + "&administrative_id=" + administrative_id + "&name_segment=" + name_segment + "&length_segment=" + length_segment +
			  			"&list_segment_id=" + list_segment_id + "&sequence=" + sequence
				
			}).done(function(msg) {
				if(msg = 1) {
					alert("thêm thành công");
				} else {
					alert("lỗi");
				}
			});	
		});
		$("#btn_update_segment").click(function() {
			// ajax insert topo_segment_detail
			var str = "";
			for(var i = 0; i < array_point.length; i++) {
				if(array_point[i] != null) {
					var temp = array_point[i].id + ", ";
					str += temp;
				} else {
					var temp_str = str.substring(0, str.lastIndexOf(","));
					str = temp_str;
					break;
				}
			}
			var segment_id = $("#segment_id").val();
			var list_point_id = str;
			var zoom_lv = $("#zoom_level").val();
			$.ajax({
				type: 	"POST",
				url : 	"insert_db.php",
				data: 	"function_name=insert_segment_detail" + "&segment_id=" + segment_id + 
						"&list_point=" + list_point_id + "&zoom_lv=" + zoom_lv 
			}).done(function(msg) {
				insert_segment_detail_response = msg;
			});	
			
			// ajax insert point
			for(var i = 0; i < array_point.length; i++) {
				if(array_point[i].id != null) {
					var id = array_point[i].id;
					var lat = array_point[i].lat;
					var lng = array_point[i].lng;
					var info = array_point[i].info;
					$.ajax({
						type: 	"POST",
						url : 	"insert_db.php",
						data: 	"function_name=insert_point" + "&id=" + id + "&lat=" + lat +
								"&lng=" + lng + "&info=" + info + "&index=" + i
					}).done(function(msg) {
						insert_point = msg;
					}).delay(200);	
				} else {
					break;
				}
			}
			
			// ajax update list_segment go to be
			var list_segment_id = $("#list_segment_id").val();
			$.ajax({
				type: 	"POST",
				url : 	"insert_db.php",
				data: 	"function_name=update_segment" + "&segment_id=" + segment_id + 
						"&list_segment_id=" + list_segment_id 
			}).done(function(msg) {
				update_segment_response = msg;
				
			});	
			callback_testajax();
		});

		// check response
		callback_testajax = function() {
//			test_callBack++;
//			$("#sp_test_ajax").text(test_callBack);
			if(insert_segment_detail_response != -1 && 
			   update_segment_response != -1 &&
			   insert_point != -1) {
				if(insert_segment_detail_response == 1 &&
				   update_segment_response == 1 && insert_point == 1){
					   alert("insert thành công!");
				} else {
					alert("lỗi rồi!");
				}
			} else {	
				setTimeout('callback_testajax()', 100);
			}
		};
		
		$("#import_node").click(function() {
			$("#load_node").show();										 
			$.ajax({
				type: 	"POST",
				url : 	"test_read_xml.php",
				data: 	"path_and_file_name=" + $("#path_and_file_name").val()
			}).done(function(msg) {
				$("#load_node").hide();
				$("#finish_import_node").text(msg);
			});	
		});
		
		//$("#road_street_id").change(function() {
		//	alert($("#road_street_id").val());
		//});
	}); 	
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body style="overflow: hidden;">
<div id="wrapper">
    <!-- <div id="import" style="background:#000">
    	<div style="margin-bottom:10px;">
			<label style="margin-bottom::20px; color:#FFF; font-size:18px">Tên và đường dẫn đến file</label><br />
            <input type="text" id="path_and_file_name" style="width:300px; height:30px;"/>
        </div>
        <div style="margin-bottom:10px;">
        	<input type="button"  id="import_node" value="Import node"/>
            <img id="load_node" src="images/loading.gif" align="absmiddle" alt="Loading..." />
            <label id="finish_import_node" style="margin-bottom::20px; color:#FFF; font-size:18px"></label><br />
        </div>
        <div style="margin-bottom:10px;">
        	<input type="button"  id="import_way" value="Import way"/>
            <img id="load_way" src="images/loading.gif" align="absmiddle" alt="Loading..." style="visibility:hidden" />
            <label id="finish_import_way" style="margin-bottom::20px; color:#FFF; font-size:18px"></label><br />
        </div>
        <div style="margin-bottom:10px;">
        	<input type="button"  id="import_relation" value="Import relation"/>
            <img id="load_relation" src="images/loading.gif" align="absmiddle" alt="Loading..." style="visibility:hidden" />
            <label id="finish_import_relation" style="margin-bottom::20px; color:#FFF; font-size:18px"></label><br />
        </div>
    </div> -->
    <span id="sp_test_ajax"></</span>
    <div id="menu_bar">
        <div class="tabbed_area">  
  			<ul class="tabs">  
                <li><a href="#" title="content_1" class="tab active">Segment info</a></li>  
                <li><a href="#" title="content_2" class="tab">Locality Info</a></li>   
                <li><a href="#" title="content_3" class="tab">Update</a></li>   
            </ul>  
  
            <div id="content_1" class="content">  
                <p style="font-size:20px">Nhập thông tin segment</p>
                <div style="margin-bottom:20px;">
                    <label style="margin-right:20px;">Chọn đường</label><br />
                    <select id="road_street_id" style="height:30px; width: 285px;">
                        <?php
                            include_once "get_db.php";
                            $result = getType_Administrative(3);
                            while($data = mysql_fetch_array($result)) {
                                echo "<option value=".$data["id"].">".$data["name"]."</option>";
                            }						
                        ?>
                    </select> 
                </div>     
                <div style="margin-bottom:20px;">
                    <label style="margin-right:20px;">Tên segment</label><br />
                    <input type="text" id="name_segment" style="height:30px; width:285px;"/>    	
                </div>            
                <div style="margin-bottom:20px;">
                    <label style="margin-right:20px;">Độ dài segment</label><br />
                    <input type="text" id="length_segment" style="height:30px; width:285px;"/>    	
                </div>            
                <div style="margin-bottom:20px;">
                    <label style="margin-right:20px;">Danh sách segment đến được</label><br />
                    <input type="text" id="list_segment_id" style="height:30px; width:223px;"/>
                    <input type="button" value="chọn" id="browse" style="height:35px"/>
                </div>           
                <div style="margin-bottom:20px;">
                    <label style="margin-right:20px;">Thứ tự segment</label><br />
                    <input type="text" id="sequence" style="height:30px; width:285px;"/>
                </div>   
                <div style="margin-bottom:20px;" align="center">
                    <input type="button" id="btn_insert_segment" value="Insert" style="height:30px; width:100px"/>
                </div>
            </div>  
            <div id="content_2" class="content">  
                <p style="font-size:20px">Nhập thông tin khu vực</p>
                <div style="margin-bottom:20px;">
                    <label style="margin-right:20px;">Thành phố(Tỉnh)</label><br />
                    <select id="city" style="height:30px; width: 285px;">
                        <?php
                            include_once "get_db.php";
                            $result = getType_Administrative(0);
                            while($data = mysql_fetch_array($result)) {
                                echo "<option value=".$data["id"].">".$data["name"]."</option>";
                            }						
                        ?>
                    </select> 
                </div>
                <div style="margin-bottom:20px;">
                    <label style="margin-right:20px;">Quận(Huyện)</label><br />
                    <select id="district" style="height:30px; width: 285px;">
                        <?php
                            include_once "get_db.php";
                            $result = getType_Administrative(1);
                            while($data = mysql_fetch_array($result)) {
                                echo "<option value=".$data["id"].">".$data["name"]."</option>";
                            }						
                        ?>
                    </select> 
                </div>
                <div style="margin-bottom:20px;">
                    <label style="margin-right:20px;">Phường(Xã)</label><br />
                    <select id="ward" style="height:30px; width: 285px;">
                        <?php
                            include_once "get_db.php";
                            $result = getType_Administrative(2);
                            while($data = mysql_fetch_array($result)) {
                                echo "<option value=".$data["id"].">".$data["name"]."</option>";
                            }						
                        ?>
                    </select> 
                </div>
                <div style="margin-bottom:20px;">
                    <label style="margin-right:20px;">Cấp độ</label><br />
                    <select id="locality_level" style="height:30px">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select> 
                </div>
                <div style="margin-bottom:20px;">
                    <label style="margin-right:20px;">Tên</label><br />
                    <input type="text" id="name_locality" style="height:30px; width:285px;"/>    	
                </div>	
                <div style="margin-bottom:20px;">
                    <label style="margin-right:20px;">Latitude</label><br />
                    <input type="text" id="latitude" style="height:30px; width:285px;"/>    	
                </div>	    
                <div style="margin-bottom:20px;">
                    <label style="margin-right:20px;">Longitude</label><br />
                    <input type="text" id="longitude" style="height:30px; width:285px;"/>    	
                </div>
                <div style="margin-bottom:20px;" align="center">
                    <input type="button" id="btn_insert_locality" value="Insert" style="height:30px; width:100px"/>    	
                </div>
            </div>   
            <div id="content_3" class="content">  
            	<p style="font-size:20px">Cập nhật thông tin segment</p>
            	<div style="margin-bottom:20px;">
                    <label style="margin-right:20px;">Chọn segment</label><br />
                    <select id="segment_id" style="height:30px; width: 285px;">
                        <?php
                            include_once "get_db.php";
                            $result = getSegment();
                            while($data = mysql_fetch_array($result)) {
                                echo "<option value=".$data["id"].">".$data["name_segment"]."</option>";
                            }						
                        ?>
                    </select> 
                </div>  
                <div style="margin-bottom:20px;">
                    <label style="margin-right:20px;">Danh sách segment đến được</label><br />
                    <input type="text" id="list_segment_id" style="height:30px; width:223px;"/>
                    <input type="button" value="chọn" id="browse_update" style="height:35px"/>
                </div>   
                <div style="margin-bottom:20px;">
                    <label style="margin-right:20px;">Danh sách các điểm biểu diễn cho segment</label><br />
                    <select id="list_point" style="height:30px; width: 285px;">
                    </select>
                </div>
                <div style="margin-bottom:20px;">
                    <label style="margin-right:20px;">Mức zoom</label><br />
                    <input type="text" id="zoom_level" style="height:30px; width:285px;"/>
                </div>
                <div style="margin-bottom:20px;" align="center">
                    <input type="button" id="btn_update_segment" value="Update" style="height:30px; width:100px"/>    	
                </div>
            </div>            
    	</div>  
    </div>
    <div id="tileContainer" oncontextmenu="return false;" >
        <div id="dragContainer" style="position: absolute; left: 0px; top: 0px"
        z-index="0"></div>
    </div>
</div>
</body>
</html>
